<template>
  <div class="app-container">
    <basic-container>
      <el-button
          class="add-btn"
          size="mini"
          type="primary"
          icon="el-icon-plus"
          @click="add"
          style="margin-bottom: 15px"
          v-if="tableData.length === 0"
      >
        新增
      </el-button>
      <vxe-table
          border
          resizable
          highlight-hover-row
          show-overflow
          ref="xTable1"
          :data="tableData">
        <vxe-table-column field="attention" title="注意事项">
          <template v-slot:default="{ row }">
            <div class="attention-tip" v-html="row.attention"></div>
          </template>
        </vxe-table-column>
        <vxe-table-column field="createDateTime" title="创建时间" width="150px"></vxe-table-column>
        <vxe-table-column field="id" title="操作" width="150" fixed="right" align="center">
          <template v-slot:default="{ row }">
            <div style="display: inline-block">
              <el-button size="mini" @click="edit(row)" type="primary" icon="el-icon-edit" title="编辑"/>
              <el-button  type="danger" @click="del(row)" icon="el-icon-delete" size="mini" title="删除"/>
            </div>
          </template>
        </vxe-table-column>
      </vxe-table>
      <!--新增弹出窗 start-->
      <el-dialog :title="title" width="800px" :close-on-click-modal="false" :visible.sync="dialogFormVisible" :before-close="close">
        <el-form :model="model" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="注意事项" prop="attention">
            <vue-ckeditor
                v-model="model.attention"
                :config="config"
                @blur="onBlur($event)"
                @focus="onFocus($event)"
                @dialogDefinition="onDialogDefinition($event)"
                @fileUploadRequest="onFileUploadRequest($event)"
                @fileUploadResponse="onFileUploadResponse($event)"
            ></vue-ckeditor>
          </el-form-item>
          <el-form-item>
            <el-button @click="resetForm('ruleForm')">取消</el-button>
            <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--新增弹出窗 end-->

    </basic-container>
  </div>
</template>

<script>
import api from "@/api/classroom/classroom";
import VueCkeditor from "vue-ckeditor2";
import editorMixins from "@/mixins/editorMixins";
import {mapGetters} from 'vuex';

export default {
  name: "room-tips",
  mixins: [editorMixins],
  components: {
    VueCkeditor
  },
  data(){
    return{
      loading: false,
      dialogFormVisible: false,
      title: '注意事项新增',
      tableData: [],
      model: {
        attention: ''
      },
      rules: {
        attention: [
          { required: true, message: '请填写注意事项信息', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCompList();
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ]),
  },
  methods:{
    getCompList() {
      const params = {}
      api.queryTipsList(params, 'get').then((res) => {
        this.tableData = res;
      })
    },
    //关闭弹窗，重置表单
    close(){
      this.dialogFormVisible = false;
      this.$refs['ruleForm'].resetFields();
    },
    resetForm(formName) {
      this.dialogFormVisible = false;
      this.$refs[formName].resetFields();
    },
    // 新增
    add() {
      this.dialogFormVisible = true;
      this.title = '注意事项新增';
      this.model.attention = '';
    },
    edit(val) {
      this.dialogFormVisible = true;
      this.title = '注意事项编辑';
      this.model = _.cloneDeep(val);
    },
    // 保存新增
    submitForm(formName) {
      let message = this.title === '注意事项编辑' ? '保存成功' : '新增成功';
      let type = this.title === '注意事项编辑' ? 'put' : 'post';
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const parmas = _.cloneDeep(this.model);
          api.queryTipsList(parmas, type).then(() => {
            this.$message({
              message,
              type: 'success'
            });
            this.dialogFormVisible = false;
            this.getCompList();
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    del(val) {
      let ids = [];
      ids.push(val.id);
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.queryTipsList(ids, 'delete').then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getCompList();
        });
      }).catch(() => {
        console.log('已取消')
      });
    },
  }
}
</script>

<style lang="scss">
.attention-tip{
  font-size: 14px;
  p{
    display: inline-block;
    margin: 0;
    strong{
      font-weight: initial;
      font-size: 14px;
    }
  }
}
</style>